<template>
  <!--会员签到-->
  <div>
    <Form ref="formSell"
          :model="formItem"
          :rules="true"
          :label-width="80">
      <Row label="">
        <Divider :prefix="true">XX会员</Divider>
        <Row type="flex"
             justify="space-between"
             class="userAssets">
          <Col span="8">
          <div class="userAssets-num">
            0
          </div>
          <div>账户余额</div>
          </Col>
          <Col span="8">
          <div class="userAssets-num">
            瑜伽课一
          </div>
          <div>会员卡类型</div>
          </Col>
          <Col span="8">
          <div class="userAssets-num ">
            2019-12-01
          </div>
          <div>上次消费</div>
          </Col>
          <Spin fix
                v-if="false"></Spin>
        </Row>
        <Divider dashed />
      </Row>
      <FormItem label="号码"
                prop="coinId">
        <Input style="width:200px"
               search
               enter-button
               placeholder="请输入号码查询" />
      </FormItem>
      <FormItem label="课程"
                prop="amount">
        <Select v-model="model13"
                style="width:200px"
                filterable
                remote
                :remote-method="remoteMethod1"
                :loading="loading1">
          <Option v-for="(option, index) in options1"
                  :value="option.value"
                  :key="index">{{option.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="老师"
                prop="amount">
        <Select v-model="teacherModel"
                style="width:200px">
          <Option v-for="item in teacherList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="消费">
        <Input style="width:200px">
        <Select v-model="select2"
                slot="append"
                style="width: 70px">
          <Option value="com">金额</Option>
          <Option value="org">次</Option>
        </Select>
        </Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      columns1: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '课程',
          key: 'course'
        },
        {
          title: '老师',
          key: 'teacher'
        },
        {
          title: '消费(￥/次)',
          key: 'consume'
        },
        {
          title: '操作员',
          key: 'operator'
        },
        {
          title: '时间',
          key: 'time'
        }
      ],
      data1: [
        {
          name: '小红',
          course: '瑜伽',
          teacher: 'John Brown',
          consume: '100',
          operator: '店员一号',
          time: '2019-12-12'
        }
      ],
      courseModel: '',
      teacherList: [ // 老师
        {
          value: '老师一',
          label: '老师一'
        },
        {
          value: '老师二',
          label: '老师一'
        }
      ],
      teacherModel: '',
      addSellModel: false,
      select2: 'com',
      model13: '',
      loading1: false,
      options1: [],
      list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
    }
  },
  mounted () {

  },
  methods: {
    remoteMethod1 (query) {
      if (query !== '') {
        this.loading1 = true
        setTimeout(() => {
          this.loading1 = false
          const list = this.list.map(item => {
            return {
              value: item,
              label: item
            }
          })
          this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }, 200)
      } else {
        this.options1 = []
      }
    }
  }
}
</script>

<style scoped>
.rules {
  font-size: 14px;
  margin: 20px;
}
.userAssets .ivu-col {
  text-align: center;
}
</style>
